<template>
	<view class="container page-order-detail">
		<view class="module-status">
			<text class="iconfont icondengdai"></text>
			<text class="status-title">{{ resData.status }}</text>
		</view>

		<navigator
			class="module module-logistics"
			:url="'../logistics/index?id=' + '34'"
		>
			<text class="iconfont iconwuliuguanli"></text>
			<view class="item-title">
				感谢您在微企生鲜集团购物，欢迎再次光临
				<text class="iconfont iconjiantou"></text>
			</view>
			<view class="item-tips">2020-03-01 16:01</view>
		</navigator>
		<view class="module module-address">
			<view class="item-phone">庄 137****5114</view>
			<view class="item-address">广东省广州市黄埔区区块链生产基地</view>
		</view>
		<view class="module-product">
			<view class="module-header">商品信息</view>
			<view class="product-body">
				<navigator
					:url="'../../index/details/index?id='"
					v-for="(item, index) in resData.productList"
					:key="index"
					class="item-content"
				>
					<productInfo
						:title="item.title"
						:tips="item.tips"
						:count="item.count"
						:price="item.price"
						style="width: 100%;"
					></productInfo>
				</navigator>
			</view>
		</view>

		<view class="module-info">
			<view class="module-header">
				订单信息
				<button class="button-copy" type="default" @tap="handleCopy">
					复制
				</button>
			</view>
			<view class="info-body">
				<view class="item">
					<text class="item-addon">订单编号：</text>
					64451441
				</view>
				<view class="item">
					<text class="item-addon">下单时间：</text>
					2020-03-30 15:20
				</view>
				<view class="item">
					<text class="item-addon">支付方式：</text>
					快捷支付
				</view>
				<view class="item">
					<text class="item-addon">配送方式：</text>
					快递公司
				</view>
				<view class="item">
					<text class="item-addon">订单编号：</text>
					64451441
				</view>
			</view>
			<view class="info-footer">
				<view class="item">
					<text class="item-addon">商品总额：</text>
					<text class="item-price">￥2000</text>
				</view>
				<view class="item">
					<text class="item-addon">运费：</text>
					<text class="item-price">￥10</text>
				</view>
			</view>
		</view>

		<view class="module-button fixed-bottom">
			<button class="item-button" type="default">删除订单</button>
			<button class="item-button" type="default" @tap="handleToReturn">
				申请售后
			</button>
			<button class="item-button" type="default" @tap="handleToEvaluate">
				评论商品
			</button>
			<button class="item-button" type="default">立即付款</button>
		</view>
	</view>
</template>

<script>
import productInfo from '@/pages/components/product-info/product-info.vue';
export default {
	components: {
		productInfo,
	},
	data() {
		return {
			resData: {
				shop: '微企生鲜集团',
				status: '待支付',
				totalPrice: '240',
				sn: '5020200308',
				productList: [
					{
						title: '新鲜好吃的三文鱼',
						tips: '日本进口，400g',
						price: 120,
						count: 2,
					},
					{
						title: '新鲜好吃的三文鱼',
						tips: '日本进口，400g',
						price: 120,
						count: 2,
					},
				],
			},
		};
	},
	onLoad(options) {},
	methods: {
		handleCopy: function () {
			uni.setClipboardData({
				data: 'hello',
				success: function () {},
			});
		},
		handleToReturn: function () {
			uni.navigateTo({
				url: '../return/index',
			});
		},
		handleToEvaluate: function () {
			uni.navigateTo({
				url: '../evaluate/index',
			});
		},
	},
};
</script>
<style lang="scss">
.page-order-detail {
	background: #f5f5f5;
	padding: 0 0 100rpx;

	.module-status {
		background: $ds-main-color;
		padding: 52rpx 32rpx;
		color: #fff;

		.iconfont {
			margin-right: 6rpx;
		}

		.status-title {
			font-size: 32rpx;
		}
	}

	.module {
		background: #fff;
		margin: 0 0 32rpx;
		padding: 32rpx 32rpx;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	.module-logistics {
		position: relative;
		padding: 32rpx 72rpx;
		.item-tips {
			padding: 6rpx 0 0;
			font-size: 24rpx;
			color: #888;
		}
		.iconwuliuguanli {
			position: absolute;
			top: 36rpx;
			left: 32rpx;
			font-size: 26rpx;
		}
		.iconjiantou {
			position: absolute;
			top: 30rpx;
			right: 16rpx;
		}
	}

	.module-address {
		.item-phone {
			margin: 8rpx;
		}
		.iconfont {
			float: right;
		}

		.item-address {
			color: #888;
		}
	}

	.module-header {
		padding: 18rpx $uni-spacing-base;
		line-height: 54rpx;
		border-bottom: 1px solid #eee;
	}

	.module-product {
		background: #fff;
		margin: 0 0 32rpx;

		.product-body {
			padding: $uni-spacing-sm $uni-spacing-lg;
			border-bottom: 1px solid #eee;
		}

		.media-content {
			flex: 1;
			padding: 0 $uni-spacing-row-base;
		}

		.item-content {
			display: flex;
			padding: $uni-spacing-base 0;
			border-bottom: 1px solid #eee;

			&:last-child {
				border-bottom: none;
			}
		}
	}

	.module-info {
		background: #fff;

		.button-copy {
			padding: 0 20rpx;
			float: right;
			height: 54rpx;
			line-height: 54rpx;
			font-size: $uni-font-size-sm;
		}

		.info-body {
			padding: $uni-spacing-col-sm $uni-spacing-col-lg;
		}

		.item {
			padding: $uni-spacing-col-base 0;
			color: #888;
			font-size: 26rpx;
		}

		.item-addon {
			color: #000;
		}

		.info-footer {
			border-top: 1px solid #eee;
			padding: $uni-spacing-col-sm $uni-spacing-col-lg;
		}

		.item-price {
			float: right;
			color: $uni-text-price;
		}
	}

	.module-button {
		background: #fff;
		padding: $uni-spacing-col-base 6rpx;
		display: flex;
		justify-content: flex-end;
		border-top: 1px solid #eee;
		.item-button {
			font-size: $uni-font-size-sm;
			margin: 0 6rpx;
		}
	}
}
</style>
